<template>
  <div class="mod-config">
    <div class="btnGroup">
      <h5>数据导入汇总</h5>
      <div class="btnList">
        <el-button
          size="mini"
          @click="addOrUpdateHandle()"
          v-if="isAuth('cms:tbCopyFlowData:save')"
          type="primary"
          >流量计数据录入</el-button
        >
        <el-button
          size="mini"
          @click="openUploadFileDialog()"
          type="warning"
          v-if="isAuth('cms:tbCopyFlowData:importExcel')"
          >导入泵站数据</el-button
        >
        <el-button size="mini" @click="openUploadFileDialog()" type="info"
          >导入泵站数据模板</el-button
        >
        <el-button
          size="mini"
          @click="xjDataHandle()"
          v-if="isAuth('cms:tbCopyFlowData:save')"
          type="danger"
          >西江水厂数据录入</el-button
        >
      </div>
    </div>
    <div class="tablePart">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
        class="formSearch"
      >
        <el-form-item label="日期:">
          <el-date-picker
            size="mini"
            v-model="dataForm.date"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="时间:">
          <el-time-select
            size="mini"
            v-model="dataForm.time"
            :picker-options="{
              start: '00:00',
              step: '00:10',
              end: '23:50'
            }"
            placeholder="选择时间"
          />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" @click="getDataList()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        style="width: 100%;"
        height="60vh"
      >
        <el-table-column
          prop="flowMeterName"
          width="200"
          header-align="center"
          align="center"
          label="流量计"
        />
        <el-table-column
          width="160"
          prop="updateTime"
          header-align="center"
          align="center"
          label="日-更新时间"
        />
        <el-table-column
          prop="copyFlowSum"
          header-align="center"
          align="center"
          label="手动爬取数据-累计抄表用水量"
        />
        <el-table-column
          width="160"
          prop="updateTimeMonth"
          header-align="center"
          align="center"
          label="月-更新时间"
        />
        <el-table-column
          prop="copyFlowSumMonth"
          header-align="center"
          align="center"
          label="手动爬取数据-当月累计抄表水量"
        />
        <el-table-column
          width="160"
          prop="updateTimeYear"
          header-align="center"
          align="center"
          label="年-更新时间"
        />
        <el-table-column
          prop="copyFlowSumYear"
          header-align="center"
          align="center"
          label="手动爬取数据-年度累计抄表水量"
        />
      </el-table>
    </div>
    <!-- 弹窗, 补充手抄数据 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    />
    <xj-daily-add-or-update
      v-if="xjaddOrUpdateVisible"
      ref="xjaddOrUpdate"
      @refreshDataList="getDataList"
    />
    <!-- 弹窗, 各泵站数据当天列表数据 -->
    <daily-view
      v-if="dailyVisible"
      ref="dailyview"
      @refreshDataList="getDataList"
    />
    <!-- 导入人员档案 -->
    <!--  action 放的是导入文件的后台地址 -->
    <el-dialog title="导入流量计数据" :visible.sync="uploadVisible" width="66%">
      <el-upload
        :show-file-list="false"
        :http-request="uploadFile"
        :before-upload="beforeUpload"
        :on-exceed="handleExceed"
        :limit="1"
        action="#"
        style="display: inline-flex;"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import AddOrUpdate from "./daily-add-or-update";
import DailyView from "./daily-view";
import XjDailyAddOrUpdate from "./xjdaily-add-or-update";
import moment from "moment";
import { isAuth } from "../../../utils";
export default {
  data() {
    return {
      dataForm: {
        date: "",
        time: ""
        // name: ""
      },
      file: "", // 文件流
      filename: "", // 文件名
      dataList: [], // 日常抄表爬取数据列表
      warningDataList: [], // 日常抄表爬取数据列表中存在未赋值的列表
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      xjaddOrUpdateVisible: false,
      dailyVisible: false,
      uploadVisible: false
    };
  },
  components: {
    AddOrUpdate,
    DailyView,
    XjDailyAddOrUpdate
  },
  activated() {
    this.getDataList();
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      // 判断日期不能为空，否则获取当天日期
      if (this.dataForm.date === null || this.dataForm.date === "") {
        this.dataForm.date = moment(new Date()).format("YYYY-MM-DD");
      }
      // 时间选择，没有时间，默认选择到时分，有时间数据就获取时间数据，秒的数据需要在再放合并时间时候补全
      if (this.dataForm.time === null || this.dataForm.time === "") {
        this.dataForm.time = moment(new Date()).format("HH") + ":00";
      } else {
        this.dataForm.time = this.dataForm.time;
      }
      let postDateTime = this.dataForm.date + " " + this.dataForm.time + ":00";
      this.$http({
        url: this.$http.adornUrl("/cms/tbFlowMeter/recordList"),
        method: "get",
        params: this.$http.adornParams({
          dateTime: postDateTime
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.vo.recordList; // 获取日常抄表的数据进行赋值
          // 先判断是否有数据存在未赋值情况
          // if (data.vo.undoCopyDataList && data.vo.undoCopyDataList.length > 0) {
          //   let getThisListData = data.vo.recordList.filter(
          //     item => item.id === data.vo.undoCopyDataList[0].ids[0]
          //   );
          //   调起弹窗提示需要补充信息
          //   this.addOrUpdateVisible = true;
          //   this.$nextTick(() => {
          //     this.$refs.addOrUpdate.init(
          //       data.vo.undoCopyDataList[0].dateTime,
          //       getThisListData[0]
          //     );
          //   });
          // }
          this.warningDataList = data.vo.undoCopyDataList;
        } else {
          this.dataList = [];
          this.warningDataList = [];
        }
        this.dataListLoading = false;
      });
    },
    // 新增 / 修改
    addOrUpdateHandle() {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init();
      });
    },
    // 西江数据点数据录入
    xjDataHandle() {
      this.xjaddOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.xjaddOrUpdate.init();
      });
    },
    // 查看泵站详情
    viewStationData(dataGroup) {
      this.dailyVisible = true;
      this.$nextTick(() => {
        this.$refs.dailyview.init(dataGroup);
      });
    },
    // 导入文档弹层
    openUploadFileDialog() {
      this.uploadVisible = true;
      this.file = null;
      this.filename = null;
    },
    // 判断是否只能上传一个文件，超过提示报错
    handleExceed(e) {
      this.$notify.error({
        title: "错误",
        message: "只能上传一个文件"
      });
    },
    // 上传前操作，判断是否为excel文件
    beforeUpload(file) {
      if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
        this.$notify.error({
          title: "错误",
          message: "上传文件只能为excel文件，且为xlsx,xls格式"
        });
        this.filelist = [];
        return false;
      }
      this.filename = file.name;
    },
    // 上传文件流程操作
    uploadFile({ file }) {
      const data = new FormData();
      data.append("file", file);
      this.$http({
        url: this.$http.adornUrl("/cms/tbCopyFlowData/importExcel"),
        method: "post",
        header: {
          "Content-Type": "multipart/form-data"
        },
        params: {
          fileName: this.filename
        },
        data
      }).then(async ({ data }) => {
        if (data && data.code === 0) {
          this.$message.success("文件导入成功");
          this.uploadVisible = false;
          this.getDataList();
        } else {
          this.$message.error(data.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.nameTil {
  padding: 0;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
}
.btnGroup {
  position: relative;
  overflow: hidden;
  border-bottom: 1px #efefef solid;
  margin: 0 0 10px;
  padding: 0 0 20px;
  h5 {
    margin: 10px 0 15px;
    padding: 0;
    font-size: 18px;
  }
}
</style>
